<template>
	<view>
		<!-- 上部蓝色区域 -->
		<view class="header">
			<!-- 当前现金余额 -->
			<view class="currentCash">
				当前现金余额（元）
			</view>
			<!-- 余额数字 -->
			<view class="cash">
				1500.00
			</view>
			<!-- 提现按钮 -->
			<button class="Withdrawal" @click="ToWithdrawal">提现</button>
			<!-- 中间白色实线 -->
			<view class="line"></view>
			<!-- 累计收入 -->
			<view class="accumulatedIncome">
				累计收入（元） &nbsp;1500.00
			</view>
			<!-- 累计提现 -->
			<view class="accumulateWdithdrawal">
				累计提现（元） &nbsp;1500.00
			</view>
			
		</view>
		<!-- 收支明细 -->
		<view class="incomeContent">
			<text class="incomeContent1">收支明细</text>
			<image src="../../static/riqi.png"></image>
			<text class="incomeContent2">日期</text>
		</view>
		<!-- 收支明细列表 -->
		<view v-for=" item in datalist" :key="item.id"  class="incomeList">
			
			<view class="service">
				XX车辆清洗、抛光打蜡服务
			</view>
			<view class="serviceTime">
				<!-- 核销时间: &nbsp;2022-10-10 &nbsp; 11:09 -->
				核销时间: {{item.time}}
			</view>
			<view class="serviceMoney">
				{{item.money}}
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist:[
					{id:1,money:1500,time:"2022-10-10 11:09"},
					{id:2,money:1100,time:"2012-10-10 11:09"}
				]
			}
		},
		methods: {
			ToWithdrawal(){
				uni.navigateTo({
					url:"/pages/IncomeDetails/Withdrawal"
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	/* 头部蓝色区域样式 */
	.header{
		width: 100%;
		height: 145px;
		line-height: 20px;
		background-color: rgba(13,122,247,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		position: relative;
	}
	/* 当前现金余额样式 */
	.currentCash{
		margin-top: 28px;
		margin-left: 17px;
		width: 126px;
		line-height: 20px;
		color: rgba(255,255,255,1);
		font-size: 14px;
		text-align: left;
		font-weight: bold;
		position: absolute;
	}
	/* 余额数字样式 */
	.cash{
		margin-top: 69px;
		margin-left: 17px;
		width: 143px;
		height: 25px;
		line-height: 25px;
		color: rgba(255,255,255,1);
		font-size: 18px;
		text-align: left;
		font-weight: bold;
		position: absolute;
	}
	/* 提现按钮样式 */
	.Withdrawal{
		font-weight: bold;
		margin-top: 98px;
		margin-left: 23px;
		width: 80px;
		height: 30px;
		line-height: 30px;
		border-radius: 4px;
		background-color: rgba(251,142,11,1);
		color: rgba(255,255,255,1);
		font-size: 14px;
		text-align: center;
		position: absolute;
	}
	/* 中间白色实线样式 */
	.line{
		margin-top: 20px;
		margin-left: 185px;
		width: 1px;
		height: 100px;
		background-color: rgba(255,255,255,1);
		border: 1px solid rgba(255,255,255,1);
		position: absolute;
	}
	/* 累计收入样式 */
	.accumulatedIncome{
		margin-top: 28px;
		margin-left: 201px;
		font-weight: bold;
	
		height: 20px;
		line-height: 20px;
		color: rgb(255,255,255);
		font-size: 14px;
		text-align: left;
		display: block;
		position: absolute;
		display: block;
	}
	/* 累计提现 */
	.accumulateWdithdrawal{
		margin-top: 84px;
		margin-left: 201px;
		font-weight: bold;
		height: 20px;
		line-height: 20px;
		color: rgb(255,255,255);
		font-size: 14px;
		text-align: left;
		display: block;
		position: absolute;
		display: block;
	}
	/* 收支明细文本样式 */
	.incomeContent{
		
		margin-top: 10px;
		margin-left: 11px;
		
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 18px;
		text-align: left;
		
	}
	.incomeContent image{
		top: 3px;
		margin-left: 200px;
		width: 24px;
		height: 20px;
		background-color: rgba(13,122,247,1);
	}
	.incomeContent2{
		color: rgba(13,122,247,1);
		text-align: left;
	}
	/* 收支明细列表样式 */
	.incomeList{
		margin: 20px 6px 0 12px;
		width: 357px;
		height: 65px;
		background-color: rgba(255,255,255,1);
		border-bottom: 1px solid rgba(187,187,187,1);
		
		
	}
	/* 服务 */
	.service{
		margin: 13px 0  0 11px;
		font-weight: bold;
		height: 22px;
		line-height: 22px;
		color: rgb(16,16,16);
		font-size: 16px;
		text-align: left;
		
	}
	.serviceTime{
		margin: 10px 0 0 11px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: left;
	}
	.serviceMoney{
		margin-top: -40px;
		margin-left: 280px;
		height: 20px;
		font-weight: bold;
		line-height: 20px;
		color: rgb(16,16,16);
		font-size: 14px;
		text-align: left;
		
	}

</style>
